<template>
  <div class="picture-search-form">
    <!-- 图片搜索表单 -->
    <a-form layout="inline" :model="searchParams">
      <div class="firstSearchForm">
        <a-form-item label="图片Id" class="pictureId">
          <a-input
            v-model:value="searchParams.id"
            placeholder="精确搜索"
            style="max-width: 320px"
            allow-clear
            @change="doSearch"
          />
        </a-form-item>
        <a-form-item label="关键词">
          <a-input
            v-model:value="searchParams.searchText"
            placeholder="模糊搜索图片名、简介、分类、标签"
            style="min-width: 265px"
            allow-clear
            @change="doSearch"
          />
        </a-form-item>
        <a-form-item label="分类">
          <a-auto-complete
            v-model:value="searchParams.category"
            placeholder="可自定义输入"
            :options="categoryOptions"
            style="min-width: 170px"
            allow-clear
            @change="doSearch"
          />
        </a-form-item>
        <a-form-item label="标签">
          <a-select
            v-model:value="searchParams.tags"
            mode="tags"
            placeholder="可自定义输入"
            :options="tagOptions"
            style="min-width: 170px;max-width: 267px"
            allow-clear
            @change="doSearch"
          />
        </a-form-item>
        <a-form-item label="格式">
          <a-auto-complete
            v-model:value="searchParams.picFormat"
            placeholder="选择图片格式"
            :options="formatOptions"
            style="min-width: 170px"
            allow-clear
            @change="doSearch"
          />
        </a-form-item>
      </div>
      <div class="secondSearchForm">
        <a-form-item label="上传时间" class="date">
          <a-range-picker
            v-model:value="dateRange"
            style="width: 373px"
            showTime
            allowClear
            :placeholder="['选择开始时间', '选择结束时间']"
            format="YYYY-MM-DD HH:mm:ss"
            :presets="rangePresets"
            @change="onRangeChange"
          />
        </a-form-item>
        <!--      <a-form-item label="图片名">-->
        <!--        <a-input-->
        <!--          v-model:value="searchParams.name"-->
        <!--          placeholder="模糊搜索图片名"-->
        <!--          style="max-width: 320px"-->
        <!--          allow-clear-->
        <!--          @change="doSearch"-->
        <!--        />-->
        <!--      </a-form-item>-->
        <!--      <a-form-item label="图片简介">-->
        <!--        <a-input-->
        <!--          v-model:value="searchParams.introduction"-->
        <!--          placeholder="模糊搜索图片简介"-->
        <!--          style="min-width: 265px"-->
        <!--          allow-clear-->
        <!--          @change="doSearch"-->
        <!--        />-->
        <!--      </a-form-item>-->
        <a-form-item label="宽度">
          <a-input-number
            v-model:value="searchParams.picWidth"
            placeholder="8 - 20000"
            style="max-width: 172px"
            allow-clear
            @change="doSearch"
            :min="8"
            :max="20000"
            addon-after="像素"
          />
        </a-form-item>
        <a-form-item label="高度">
          <a-input-number
            v-model:value="searchParams.picHeight"
            placeholder="8 - 20000"
            style="max-width: 172px"
            allow-clear
            @change="doSearch"
            :min="8"
            :max="20000"
            addon-after="像素"
          >
          </a-input-number>
        </a-form-item>
        <a-form-item label="宽高比">
          <a-input-number
            v-model:value="searchParams.picScale"
            placeholder="0.1 - 10.0"
            style="max-width: 172px"
            allow-clear
            @change="doSearch"
            :min="0.1"
            :max="10.0"
            addon-after="宽/高"
          />
        </a-form-item>
        <a-form-item label="审核状态" v-if="route.path === '/'">
          <a-select
            v-model:value="searchParams.reviewStatus"
            placeholder="选择审核状态"
            :options="PIC_REVIEW_STATUS_OPTIONS"
            allow-clear
            style="min-width: 125px"
            @change="doSearch"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button :icon="h(ClearOutlined)" type="primary" @click="clearSearchParams" title="清空所有搜索和匹配条件，并刷新数据">
              重置搜索或匹配
            </a-button>
          </a-space>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue'
import {
  listPictureFormatUsingGet,
  listPictureTagCategoryUsingGet,
} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { PIC_REVIEW_STATUS_OPTIONS } from '../constants/picture.ts'
import dayjs from 'dayjs'
import { useRoute } from 'vue-router'
import { ClearOutlined } from '@ant-design/icons-vue'

const route = useRoute()

// 定义搜索表单组件接受的属性
interface Props {
  onSearch?: (searchParams: API.PictureQueryRequest) => void
  onClearBatchEditForm?: () => void
}

const props = defineProps<Props>()

// 定义搜索条件
const searchParams = reactive<API.PictureQueryRequest>({})

// 搜索图片数据
const doSearch = () => {
  props.onSearch?.(searchParams)
}

// 默认展示图片分类、图片标签
const categoryOptions = ref<String[]>([])
const tagOptions = ref<String[]>()

/**
 * 用于搜索框默认展示图片分类、图片标签
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((data: String) => {
      return {
        value: data,
        label: data,
      }
    })
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: String) => {
      return {
        value: data,
        label: data,
      }
    })
  } else {
    message.error('默认分类标签列表展示失败，' + res.data.message)
  }
}

// 默认展示图片格式
const formatOptions = ref<String[]>([])

/**
 * 用于搜索框默认展示图片格式
 */
const getFormatOptions = async () => {
  const res = await listPictureFormatUsingGet()
  if (res.data.code === 0 && res.data.data) {
    // @ts-ignore
    formatOptions.value = (res.data.data.formatList ?? []).map((data: String) => {
      return {
        value: data,
        label: data,
      }
    })
  } else {
    message.error('图片格式列表展示失败，' + res.data.message)
  }
}

onMounted(() => {
  getTagCategoryOptions()
  getFormatOptions()
})

// 定义日期范围，默认是空数组
const dateRange = ref<[]>([])

/**
 * 日期范围更改时触发
 * @param dates
 * @param dateStrings
 */
const onRangeChange = (dates: any[], dateStrings: string[]) => {
  if (dates && dates.length >= 2) {
    searchParams.startEditTime = dates[0].toDate()
    searchParams.endEditTime = dates[1].toDate()
  } else {
    searchParams.startEditTime = undefined
    searchParams.endEditTime = undefined
  }
  props.onSearch?.(searchParams)
}

// 可选择的时间范围预设
const rangePresets = ref([
  { label: '过去 1 小时', value: [dayjs().add(-1, 'h'), dayjs()] },
  { label: '过去 3 小时', value: [dayjs().add(-3, 'h'), dayjs()] },
  { label: '过去 5 小时', value: [dayjs().add(-5, 'h'), dayjs()] },
  { label: '过去 7 小时', value: [dayjs().add(-7, 'h'), dayjs()] },
  { label: '过去 12 小时', value: [dayjs().add(-12, 'h'), dayjs()] },
  { label: '过去 1 天', value: [dayjs().add(-1, 'd'), dayjs()] },
  { label: '过去 3 天', value: [dayjs().add(-3, 'd'), dayjs()] },
  { label: '过去 5 天', value: [dayjs().add(-5, 'd'), dayjs()] },
  { label: '过去 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去 15 天', value: [dayjs().add(-15, 'd'), dayjs()] },
  { label: '过去 1 月', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去 3 月', value: [dayjs().add(-91, 'd'), dayjs()] },
  { label: '过去 6 月', value: [dayjs().add(-182, 'd'), dayjs()] },
  { label: '过去 1 年', value: [dayjs().add(-365, 'd'), dayjs()] },
])

/**
 * 重置搜索或匹配条件
 */
const clearSearchParams = () => {
  // 因为 SearchParams 是 reactive 对象
  // 所以不要直接置为空对象，最好是把每个字段值设置为 undefined 或空数组
  Object.keys(searchParams).forEach((key) => {
    // @ts-ignore
    searchParams[key] = undefined
  })
  // 日期选择项必须设置为空数组，不能是 undefined
  dateRange.value = []
  // 清空后要通知父组件执行搜索
  props.onSearch?.(searchParams)
  // 通知父组件清空批量编辑图片表单
  props.onClearBatchEditForm?.()
  message.success('搜索条件或匹配方式已重置')
}
</script>

<style scoped>
.picture-search-form .ant-form-item {
  margin-top: 13px;
}

.firstSearchForm {
  display: flex;
  margin: auto;
}

.secondSearchForm {
  display: flex;
  margin: auto;
}
</style>
